<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment::head(_,~{})"/>
<!--top begin-->
<header th:replace="fragment::header"/>
<div th:replace="fragment::search"/>
<!--top end-->
<article>
    <!--lbox begin-->
    <div class="lbox">
        <!--banbox begin-->
        <div class="banbox">
            <div class="banner">
                <div id="banner" class="fader">
                    <li class="slide" th:each="banner:${leftBanners}"><a th:href="@{${banner.url}}" target="_blank"><img
                            th:src="${banner.cover}"></a></li>
                    <div class="fader_controls">
                        <div class="page prev" data-target="prev"></div>
                        <div class="page next" data-target="next"></div>
                        <ul class="pager_list">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--banbox end-->
        <!--headline begin-->
        <div class="headline">
            <ul>
                <li th:each="banner:${rightBanners}">
                    <a th:href="@{${banner.url}}" th:title="${banner.title}">
                        <img th:src="${banner.cover}" th:alt="${banner.title}"/><span th:text="${banner.title}">为什么说10月24日是程序员的节日？</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--headline end-->
        <div class="clearblank"></div>
        <div class="tab_box whitebg">

            <div class="tab_buttons">
                <ul>
                    <li class="newscurrent">个人博客</li>
                </ul>
            </div>
            <div class="newstab">
                <div class="newsitem">
                    <div class="newspic">
                        <ul>
                            <li th:each="blogArticleLeft:${blogArticlesLeft}">
                                <a href="/article/4.html" th:href="@{'/article/' +${blogArticleLeft.id}}"><img
                                        th:src="${blogArticleLeft.cover}" src="/img/4.jpg"><span
                                        th:text="${blogArticleLeft.title}">个人网站做好了，百度不收录怎么办？来，看看他们怎么做的</span></a>
                            </li>
                        </ul>
                    </div>
                    <ul class=" newslist">
                        <li th:each="blogArticle:${blogArticles}">
                            <i></i><a href="/article/7.html" th:href="@{'/article/' +${blogArticle.id}}"
                                      th:title="${blogArticle.title}" title="安静地做一个爱设计的女子"
                                      th:text="${blogArticle.title}">安静地做一个爱设计的女子</a>
                            <p th:text="${blogArticle.introduction}">
                                自从入了这行，很多人跟我说可以做网络教程，我也有考虑，但最终没有实现，因为我觉得在这个教程泛滥的时代，直接做一套免费的原创个人博客模板更为实在。每当看到自己喜欢的配色图片</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="whitebg bloglist">
            <h2 class="htitle">最新博文</h2>
            <ul>
                <li th:each="topArticle:${topArticles}">
                    <h3 class="blogtitle">
                        <b>【顶】</b>
                        <a th:href="@{'/article/' +${topArticle.id}}" target="_blank" th:text="${topArticle.title}"></a>
                    </h3>
                    <span class="blogpic imgscale">
                        <i><a th:href="@{'/category/' +${topArticle.categoryId}}" target="_blank"></a></i>
                        <a th:href="@{'/article/' +${topArticle.id}}" th:title="${topArticle.title}">
                            <img th:src="${topArticle.cover}" th:alt="${topArticle.title}">
                        </a>
                    </span>
                    <p class="blogtext" th:text="${topArticle.introduction}"></p>
                    <p class="bloginfo">
                        <i class="avatar"><img src="/img/avatar.jpg"></i>
                        <span></span>
                        <span th:text="${#temporals.format(topArticle.updateTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                        <span>【<a th:href="@{'/category/' +${topArticle.categoryId}}" target="_blank"></a>】</span></p>
                    <a th:href="@{'/article/' +${topArticle.id}}" class="viewmore">阅读更多</a></li>
                <li th:each="recentArticle:${recentArticles}">
                    <h3 class="blogtitle">
                        <b>【顶】</b>
                        <a th:href="@{'/article/' +${recentArticle.id}}" target="_blank"
                           th:text="${recentArticle.title}"></a>
                    </h3>
                    <span class="blogpic imgscale">
                        <i><a th:href="@{'/category/' +${recentArticle.categoryId}}" target="_blank"
                              th:text="${categoryNames[recentArticle.categoryId]}"></a></i>
                        <a th:href="@{'/article/' +${recentArticle.id}}" th:title="${recentArticle.title}">
                            <img th:src="${recentArticle.cover}" th:alt="${recentArticle.title}"></a></span>
                    <p class="blogtext" th:text="${recentArticle.introduction}"></p>
                    <p class="bloginfo">
                        <i class="avatar"><img src="/img/avatar.jpg"></i>
                        <span></span>
                        <span th:text="${#temporals.format(recentArticle.updateTime,'yyyy-MM-dd HH:mm:ss')}"></span>
                        <span>【<a th:href="@{'/category/' +${recentArticle.categoryId}}" target="_blank"
                                  th:text="${categoryNames[recentArticle.categoryId]}"></a>】</span>
                    </p>
                    <a th:href="@{'/article/' +${recentArticle.id}}" class="viewmore">阅读更多</a>
                </li>
            </ul>
        </div>
        <!--bloglist end-->
    </div>
    <div class="rbox">
        <div class="card"><h2>我的名片</h2>
            <p>网名：上善若水 | Jay</p>
            <p>职业：PHP工程师、网页设计</p>
            <p>现居：湖北省-武汉市</p>
            <p>Email：fierykylin@foxmail.com</p>
            <ul class="linkmore">
                <li><a href="https://www.jianshu.com/u/d1524f5b2a69" target="_blank" class="iconfont icon-jianshu"
                       title="访问我的简书首页"></a></li>
                <li><a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=zqinq7y3pbeip6COqKG2o6_nouCtoaM"
                       target="_blank" class="iconfont icon-foxmail" title="点击给我发送邮箱"></a></li>
                <li><a href="https://gitee.com/my4vsy/springboot-blog" target="_blank" class="iconfont icon-mayun"
                       title="码云仓库"></a></li>
                <li id="weixin"><a href="#" target="_blank" class="iconfont icon-weixin" title="关注我的微信公众号"></a><i><img
                        src="https://pic.4vsy.com/weixin.png"></i></li>
            </ul>
        </div>
        <div class="whitebg paihang">
            <h2 class="htitle">点击排行</h2>
            <section class="topnews imgscale">
                <a href="/article/7.html" th:href="@{'/article/' +${hotArticle.id}}">
                    <img th:src="${hotArticle.cover}" src="/img/b02.jpg">
                    <span th:text="${hotArticle.title}">安静地做一个爱设计的女子</span>
                </a>
            </section>
            <ul>
                <li th:each="hotArticle1:${hotArticles}">
                    <i></i><a href="/article/14.html" th:href="@{'/article/' +${hotArticle1.id}}"
                              th:title="${hotArticle1.title}" th:text="${hotArticle1.title}"
                              target="_blank">十条设计原则教你学会如何设计网页布局!</a>
                </li>
            </ul>
        </div>
        <div class="whitebg tuijian">
            <h2 class="htitle">站长推荐</h2>
            <section class="topnews imgscale"><a href="/article/23.html"
                                                 th:href="@{'/article/' +${recommendArticle.id}}"><img
                    th:src="${recommendArticle.cover}"
                    src="/img/75842f4d1e18d692a66c38eb172a40ab.jpg"><span
                    th:title="${recommendArticle.title}"
                    th:text="${recommendArticle.title}">作为一个设计师,如果遭到质疑你是否能恪守自己的原则?</span></a>
            </section>
            <ul>
                <li th:each="recommendArticle:${recommendArticles}">
                    <a href="/article/14.html" th:href="@{'/article/' +${recommendArticle.id}}"
                       th:title="${recommendArticle.title}"
                       title="十条设计原则教你学会如何设计网页布局!"
                       target="_blank">
                        <i><img src="/img/718b56be9dbf920cc0a6124545216654.jpg" th:src="${recommendArticle.cover}"></i>
                        <p th:text="${recommendArticle.title}">十条设计原则教你学会如何设计网页布局!</p>
                    </a></li>
            </ul>
        </div>
        <div class="ad whitebg imgscale">
            <ul>
                <a href='javascript:;' target="_blank"><img src='/img/13.jpg'></a></ul>
        </div>
        <div class="whitebg tongji">
            <h2 class="htitle">站点信息</h2>
            <ul>
                <li><b>建站时间</b>：2020-12-17</li>
                <li><b>网站程序</b>：springboot</li>
                <li><b>文章统计</b>：<a href="/article/index8.html" target="_blank">13</a>篇文章</li>
                <li><b>统计数据</b>：<a href="#" target="_blank">百度统计</a></li>
                <li><b>微信公众号</b>：扫描二维码，关注我们</li>
                <li class="tongji_gzh"><a href='' target="_blank"><img src='https://pic.4vsy.com/weixin.png'></a></li>
            </ul>
        </div>
        <div class="links whitebg">
            <h2 class="htitle">友情链接</h2>
            <ul>
                <li th:each="blogroll:${blogrolls}"><a th:href="@{${blogroll.blogroll}}" target="_blank" th:text="${blogroll.name}">个人博客模板</a></li>
            </ul>
        </div>
    </div>
</article>
<footer th:replace="fragment::footer"/>
</html>